<template>
	<view class="goods-box u-flex u-col-top" @tap="click">
		<view class="goods__tag" v-show="tag">
			<image class="tag-img" :src="tag" mode="widthFix"></image>
		</view>
		<image class="goods_img" lazy-load fade-show :src="image" mode="aspectFill"></u-image>
			<view class="u-m-l-20">
				<view class="goods-title u-ellipsis-2 u-m-b-10">{{ title }}</view>

				<view class="tags x-f" style="flex-wrap: wrap;">
					<view class="tag" v-for="tag in detail.tags">
						{{tag.name}}
					</view>
				</view>

				<!-- <view v-if="subtitle" class="describe-text u-m-b-10 u-ellipsis-1">{{ subtitle }}</view> -->
				<slot name="describe"></slot>
				<slot name="cardBottom">
					<view class="u-flex u-col-bottom font-OPPOSANS">
						<view class="price u-m-r-10">{{ price }}</view>
						<view class="origin-price">{{ originPrice }}</view>
					</view>
				</slot>
			</view>
	</view>
</template>

<script>
	/**
	 * 商品小卡片
	 * @property {String} title - 标题
	 * @property {String} subtitle - 副标题
	 * @property {String} image - 图片地址
	 * @property {String} describe - 描述信息
	 * @property {String | Number} price - 价格
	 * @property {String | Number} originPrice - 原价
	 * @property {String} tag - 商品标签
	 * @property {Number} number - 商品数量
	 * @event {Function} click - 点击卡片
	 */
	export default {
		components: {},
		data() {
			return {};
		},
		props: {
			detail: {
				type: Object,
				default: () => {
					return {};
				}
			},
			end: false,
			image: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			subtitle: {
				type: String,
				default: ''
			},
			describe: {
				type: String,
				default: ''
			},
			price: {
				type: [Number, String],
				default: ''
			},
			originPrice: {
				type: [Number, String],
				default: ''
			},
			tag: {
				type: String,
				default: ''
			},
			number: {
				type: Number,
				default: 0
			}
		},
		computed: {},
		created() {},
		methods: {
			click() {
				this.$emit('click');
			}
		}
	};
</script>

<style lang="scss">
	.goods-box {
		position: relative;

		.goods__tag {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 5;

			.tag-img {
				width: 60rpx;
			}
		}

		.goods_img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 6rpx;
		}

		.goods-title {
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			width: 450rpx;
			line-height: 40rpx;
		}

		.describe-text {
			font-size: 24rpx;
			width: 450rpx;
			color: #0099E5;
		}

		.price {
			color: $u-type-error;
			font-weight: 600;

			&::before {
				content: '￥';
				font-size: 20rpx;
			}
		}

		.origin-price {
			color: $u-type-info-disabled;
			font-size: 24rpx;
			text-decoration: line-through;

			&::before {
				content: '￥';
				font-size: 20rpx;
			}
		}
	}

	.tag {
		padding: 0 12rpx;
		height: 32rpx;
		background: #EDF9FF;
		border-radius: 5rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #51A6DC;
		margin-right: 14rpx;
		margin-bottom: 10rpx;
	}

	.tag:nth-child(1n) {
		background: #EDF9FF;
		color: #51A6DC;
	}

	.tag:nth-child(2n) {
		background: #FDEAE6;
		color: #F95641;
	}

	.tag:nth-child(3n) {
		background: #FEF5E6;
		color: #F6CC9A;
	}
</style>